import React from 'react'
import {Switch,Route,Link} from 'react-router-dom'
import { Layout, Menu } from 'antd';
import Timi from '../components/Timi'
import Tencent from '../components/Tencent'
import WeGame from '../components/WeGame'

import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';

const { Header, Content, Sider } = Layout;

class Router extends React.Component{
    constructor(props){
        super(props)
        this.state = {

        }
    }

    render(){
        return (
            <div>
                <Layout>
                  <Sider
                    breakpoint="lg"
                    collapsedWidth="0"
                    onBreakpoint={broken => {
                      console.log(broken);
                    }}
                    onCollapse={(collapsed, type) => {
                      console.log(collapsed, type);
                    }}
                  >
                    <div className="logo" />
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                        <div className="space_container"></div>
                      <Menu.Item key="1" icon={<UserOutlined />}>
                        <Link to="/">天美文化</Link>
                      </Menu.Item>
                      <Menu.Item key="2" icon={<VideoCameraOutlined />}>
                        <Link to="/tencent">腾讯简介</Link>
                      </Menu.Item>
                      <Menu.Item key="3" icon={<UploadOutlined />}>
                        <Link to="/wegame">WeGame背景</Link>
                      </Menu.Item>
                    </Menu>
                  </Sider>
                  <Layout>
                    <Header className="site-layout-sub-header-background" style={{ padding: 0 }}>
                        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
                            <Menu.Item key="1">首页</Menu.Item>
                            <Menu.Item key="2" onClick={()=>{
                                this.props.history.push('/about')
                            }}>
                                关于
                            </Menu.Item>
                        </Menu>
                    </Header>
                    <Content style={{ margin: '24px 16px 0' }}>
                      <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
                        <Switch>
                            <Route path="/tencent" component={Tencent}/>
                            <Route path="/wegame" component={WeGame}/>
                            <Route path="/" component={Timi}/>
                        </Switch>
                      </div>
                    </Content>
                  </Layout>
                </Layout>
            </div>
        )
    }
}

export default Router;